<template>
	<view class="productList">
		<view class="nav">
			<view class="nav_item" @click="getnav(index)" v-for="(item,index) in nav" :key="index">
				<view :class="index==0?'hover nav_name':'nav_name' ">
					<text>{{ item }}</text>
					<view class="pic" v-if="(index==0 && pageParam.saleSort > 0) || (index==1 && pageParam.newSort > 0) || (index==2 && pageParam.priceSort > 0)">
						<image :src="obtainImgUrl((index==0 && pageParam.saleSort == 2) || (index==1 && pageParam.newSort == 2) || (index==2 && pageParam.priceSort == 2)?'icon/icon40.png':'icon/icon41.png')" mode="widthFix"></image>
					</view>
					<view :class="istype?'up':'down'" v-if="index==3">
					</view>
				</view>
			</view>
		
		</view>
		<uni-popup ref="popup"  type="top" >
			<view class="model">
			    <view class="num">
					<view :class="selPayType==item.itemId?'item':'noitem'" v-for="(item,index) in payTypeList" :key="index" @click="selPayTypeFun(item.itemId)">
						<text>{{item.itemName}}</text>
					</view>
				</view>
				<view class="bot">
					<text @click="close()">取消</text>
					<text @click="subSel()">确定</text>
				</view>
			</view>
			
		</uni-popup>
		<view class="content" v-if="pageResult.list.length>0">
			<view class="list">
				<view class="list_item" v-for="(item,index) in pageResult.list" :key="index" @click="jump('product_view', item.id)">
					<image :src="item.picture" mode=""></image>
					<view class="item_text">{{item.name}}</view>
					<view class="item_text1">{{item.price > 0 ? '￥'+item.price : ''}}{{item.price > 0 && item.point_exchange > 0 ? ' + ' : ''}}{{item.point_exchange > 0 ? item.point_exchange+'豆力' : ''}}</view>
				</view>
			</view>
		</view>
		<movable-view class="xf" direction="all" @click="jump('cart')">
			<image :src="obtainImgUrl('icon/car.png')" mode="scaleToFill"></image>
			<text>{{cartNum}}</text>
		</movable-view>
		<view v-if="pageResult.list.length == 0" class="nocontent">
			<image :src="obtainImgUrl('icon/noItem.png')" mode="widthFix"></image>
			<text>暂未找到记录～</text>
		</view>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				nav: ["销量", "最新", "价格", "类型"],
				istype : false,
				cartNum : 0,
				payTypeList: [],
				selPayType: 0,
				pageParam: {
					saleSort : 0,
					newSort : 0,
					priceSort: 0,
					payType : 0,
					keywords : '',
					cateId: 0,
					page: 0,
					pageSize: 6,
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				}
			}
		},
		methods: {
			open() {
				this.istype = true;
				this.$refs.popup.open();
			},
			close() {
				this.istype = false;
				this.$refs.popup.close();
			},
			getnav(index){
				if(index==3){
					this.open();
					return ;
				}
				this.close();
				if(index == 0) {
					this.pageParam.saleSort = this.pageParam.saleSort == 0 ? 1 : (this.pageParam.saleSort == 1 ? 2 : 1);
				}
				if(index == 1) {
					this.pageParam.newSort = this.pageParam.newSort == 0 ? 1 : (this.pageParam.newSort == 1 ? 2 : 1);
				}
				if(index == 2) {
					this.pageParam.priceSort = this.pageParam.priceSort == 0 ? 1 : (this.pageParam.priceSort == 1 ? 2 : 1);
				}
				this.pageParam.page=0;
				this.pageResult.list=[];
				this.getList();
			},
			getPayTypeList() {
				serve
					.request({
						url: '/product/product/point-exchange-type-list',
						data: {}
					}).then(res => {
						this.payTypeList = res.data;
						// this.$forceUpdate();
					});
			},
			getList(){
				var self = this;
				self.pageParam.page++
				serve
					.request({
						url: '/product/product/index',
						data: self.pageParam
					}).then(res => {
						console.log(res.data); 
						if (res.data && res.data.length > 0) {
							self.pageResult.list=self.pageResult.list.concat(res.data);
						}
						self.pageResult.isEmpty = self.pageResult.list.length == 0;
						self.pageResult.isEnd = res.data.length == 0; 
					});
			},
			selPayTypeFun(payType) {
				this.selPayType = payType;
			},
			subSel() {
				this.close();
				this.pageParam.payType = this.selPayType;
				this.pageParam.page=0;
				this.pageResult.list=[];
				this.getList();
			},
			getCartNum() {
				if(uni.getStorageSync('access-token') == '') {
					return ;
				}
				serve.request({
					url: '/shop/index/cart-num',
					data: {}
				}).then(res => {
					this.cartNum = res.data.num;
				});
			},
			obtainImgUrl(imgUrl) {
				return serve.imgUrl()+imgUrl;
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			this.pageParam.cateId = !options.cateId ? 0 : options.cateId;
			this.pageParam.payType = !options.payType ? 0 : options.payType;
			this.selPayType = this.pageParam.payType;
			this.getCartNum();
			this.getPayTypeList();
			this.getList();
		},
		onPullDownRefresh() {
			this.pageParam.page=0;
			this.pageResult.list=[];
			this.getCartNum();
			this.getPayTypeList();
			this.getList();
		},
		onReachBottom() {
			if(this.pageResult.isEnd ||this.pageResult.isEmpty){
				return
			}
			this.getList();
		}
	}
</script>

<style scoped lang="scss">
	.productList{
		.model{
			position: fixed;
			width: 100%;
			top: 248upx; 
			.num{
				background: #FFFFFF;
				box-sizing: border-box;
				padding: 50upx 30upx;
				display: flex;
				flex-wrap: wrap;
				.item{
					padding: 10upx 50upx;
					border-radius: 40upx;
					font-size: 28upx;
					margin-top: 20upx;
					margin-right: 10upx;
					color: #FFFFFF;
					background: rgba(251, 202, 63, 1);
				}
				.noitem{
					padding: 10upx 50upx;
					margin-right: 10upx;
					margin-top: 20upx;
					font-size: 28upx;
				    border: 1upx rgba(204, 204, 204, 0.3) solid;
					border-radius: 40upx;
				}
				
			}
			.bot{
				display: flex;
				width: 100%;
				text{
					font-size: 28upx;
					width: 50%;
					height: 80upx;
					line-height: 80upx;
					text-align: center;
					background: #eeeeee;
				}
				text:last-child{
					color: #FFFFFF;
					background: rgba(251, 202, 63, 1);
				}
			}
		}
		
		.nav {
			display: flex;
			position: fixed;
			width: 100%;
			// top: 88upx;
			height: 100upx;
			background: #FFFFFF;
			z-index: 200;
			align-items: center;
			border-bottom: 1upx rgba(204, 204, 204, 0.3) solid;
		
			.nav_item {
				width: 25%;
				text-align: center;
				.scroll-item {
					padding: 0upx 10upx;
					display: inline-flex;
					height: 28upx;
					font-size: 28upx;
				}
		
				.nav_name {
					padding: 0upx 10upx;
					display: inline-flex;
					height: 28upx;
					font-size: 28upx;
					position: relative;
					.pic{
						position: absolute;
						top: 0upx;
						right: -20upx;
						image{
							width: 20upx;
						}
					}
					.down{
						position: absolute;
						top: 15upx;
						right: -20upx;
						width: 0px;
						height: 0px;
						border-width: 10upx;
						border-style: solid;
						border-color: #B5B5B5 transparent  transparent transparent;
					}
					.up{
						position: absolute;
						top: 5upx;
						right: -20upx;
						width: 0px;
						height: 0px;
						border-width: 10upx;
						border-style: solid;
						border-color: transparent transparent #B5B5B5 transparent;
					}
				}
			}
		}
		.xf{
			position: fixed;
			left: 630upx;
			top: 70%;
			width:90upx;
			height:90upx;
			image{
				width:100%;
				height:100%;
			}
			text{
				position: absolute;
				width: 30upx;
				height: 30upx;
				right: 5upx;
				line-height: 30upx;
				text-align: center;
				border-radius: 50%;
				font-size: 18upx;
				background: red;
				color: #FFFFFF;
			}
		}
		
		.content {
			box-sizing: border-box;
			width: 100%;
			padding: 100upx 30upx 49upx;
			border-bottom: 16upx #FBFBFD solid;
		
			.list {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				padding: 0upx 0upx 0upx;
				.list_item {
					width: 330upx;
					padding-top: 30upx;
					image {
						width: 330upx;
						height: 340upx;
					}
					.item_text{
						margin-top: 30upx;
						font-size:32upx;
						//font-weight:bold;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.item_text1{
						font-size:32upx;
						color: #FFC600;
					}
				}
			}
		}
		
		.nocontent{
			width: 100%;
			padding-top: 338upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width:220upx;
				height:124upx;
			}
			text{
				font-size:28upx;
				color:rgba(204,204,204,1);
			     margin-top: 30upx;
			}
		}
		
		
	}
</style>
